<template>
  <div id="app" v-cloak>
    <!-- 骨架屏 -->
    <div v-if="loading" class="skeleton-container">
      <div class="skeleton-banner"></div>
    </div>

    <div v-if="!loading" class="main-content">
      <!-- 轮播图 -->
      <HomeBanner :banner-data="banner_box" />
      <Inquiry />
      <Solution :transport-solutions="transportSolutions"/>
      <!-- 联系我们部分 -->
      <div class="contact-section">
        <div class="contact-content">
          <button class="contact-button" @click="navigateToContactUs">{{$t('buttonInfo.contactUs')}}</button>
        </div>
      </div>
      <MerchantLogos :merchantLogos="merchantLogos" />
      <HomeServices :services="services"/>
      <GlobalNetwork :network-data="networkData"/>

    </div>
  </div>
</template>

<script>
import {bannerList} from "@/api/banner/banner"
import {getSolutionUsContent} from "@/api/solution/solution"
import {getStatUsList} from "@/api/stat/stat"
import {getServiceUsList} from "@/api/service/service"
import {merchantList} from "@/api/merchant/merchant"
import HomeBanner from "./components/home/HomeBanner.vue";
import Inquiry from "./components/home/Inquiry.vue";
import Solution from "./components/home/Solutions.vue";
import MerchantLogos from "./components/home/MerchantLogos.vue";
import HomeServices from "./components/home/HomeServices.vue";
import GlobalNetwork from "./components/home/GlobalNetwork.vue";

export default {
  components: {
    GlobalNetwork,
    HomeServices,
    MerchantLogos,
    Solution,
    Inquiry,
    HomeBanner

  },
  data() {
    return {
      loading:false,
      banner_box: [],
      transportSolutions: [],
      services: [],
      networkData: [],
      merchantLogos: [],

    }
  },
  computed: {

  },
  async created() {
    await this.getBannerList(); // 先加载首屏关键数据
    this.$nextTick(() => {
      // 分批加载其他非关键数据
      Promise.all([
        this.getSolutionsList(),
        this.getListNetwork(),
        this.getServiceList(),
        this.getMerchantList(),
      ]).catch(error => {
        console.error("加载数据出错:", error);
      });
    });
  },
  mounted() {

  },
  beforeDestroy() {

  },
  methods: {

    /** 查询合作商家列表 */
    async getMerchantList() {
      this.loading = true
      await merchantList().then(response => {
        this.merchantLogos=response.data
        this.loading = false
      })
    },
    /**查询服务列表 */
    async getServiceList() {
      this.loading = true
      await getServiceUsList().then(response => {
        this.services=response.data.services;
        this.loading = false;
      })
    },
    /** 查询全球网络统计列表 */
    async getListNetwork() {
      this.loading = true
      await getStatUsList().then(response => {
        this.networkData=response.data.stats;
        this.loading = false;
      })
    },
    /** 查询运输解决方案列表 */
    async getSolutionsList() {
      this.loading = true
      await getSolutionUsContent( ).then(response => {
        this.transportSolutions = response.data.solutions;
        this.loading = false
      })
    },
    /** 查询轮播图列表 */
    async getBannerList() {
      this.loading = true
      await bannerList(1).then(response => {
        this.banner_box = response.data;
        this.loading = false
      })
    },


    // 联系我们跳转
    navigateToContactUs() {
      this.$router.push('/about/contact');
    },
    // 轮播图跳转
    handleRedirect() {
      this.$router.push(this.banner_box.buttonLink);
    },

  }
}
</script>

<style scoped lang="scss">
/* 样式保持不变 */
[v-cloak] {
  display: none;
}

.skeleton-container {
  width: 100%;
  min-height: 2000px;
}

.skeleton-banner {
  height: 800px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.contact-section {
  padding: 10px 0;
  text-align: center;
}

.contact-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
}

.contact-button {
  padding: 16px 40px;
  background-color: #fe3231;
  color: white;
  border: none;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.contact-button:hover {
  background-color: #e02828;
}


</style>
